<template>
  <div class="container index-wrap">
    <headerBar :title="local.productionManagement" :isNoReturn="true" @changeLan="changeLan"></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}">
      <div class="page__bd" style="width: 100%;">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <input
                type="search"
                class="weui-search-bar__input"
                v-model="inputVal"
                :placeholder="local.searchsupplierandgoodsname"
                @confirm="inputTyping"
              />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
              <span
                style=";position:absolute;right: 11px;bottom: 2px;"
                :hidden="!inputShowed"
                @click="hideInput"
              ></span>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">{{local.search}}</div>
            </label>
          </div>
          <div
            class="weui-search-bar__cancel-btn"
            :hidden="!inputShowed"
            @click="inputTyping"
          >{{local.search}}</div>
        </div>
      </div>
      <div class="filter">
        <div class="filter-left">
          <div class style="width: 100%;">
            <div class="switchTab-a">
              <div class="switchTab-b">
                <div class="msg-status">
                  <div>{{local.screen}}：</div>
                  <div
                    class="a"
                    :id="0"
                    :class="[activeIndex == 0 ? 'msg_item_on' : '']"
                    @click="tabClick(0)"
                  >{{local.all}}</div>
                  <div class="a">|</div>
                  <div
                    class="a"
                    :id="2"
                    :class="[activeIndex == 2 ? 'msg_item_on' : '']"
                    @click="tabClick(2)"
                  >{{local.Splitting}}</div>
                  <div class="a">|</div>
                  <div
                    class="a"
                    :id="3"
                    :class="[activeIndex == 3 ? 'msg_item_on' : '']"
                    @click="tabClick(3)"
                  >{{local.SpliCcomplete}}</div>
                </div>
              </div>
              <div class="clear-filter" @click="tabClick(0)">{{local.clearfilter}}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height:95%">
        <div class="documentsList">
          <template v-if="splitRecords.length == 0">
            <div class="stock-in-record nodata-wrap">
              <img src="/static/style/block.png" class="nodata-img" />
              <p class="nodata-txt">{{local.nodata}}</p>
            </div>
          </template>
          <div class="stock-in-list">
            <div
              class="stock-in-record"
              @click="routerToUrl('/packageA/pages/continueSplitting/index?id='+item.id+'&pages=1')"
              v-for="(item, i) in splitRecords"
              :key="i"
            >
              <div class="record-supplier">
                <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{local.supplier}}：</span>
                <div>{{item.supplierName}} ({{item.supplierCode}})</div>
              </div>
              <div class="record-goods">
                <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{local.goodsName}}：</span>
                <div>{{item.goodsName}}</div>
                <span class="status" v-if="item.status == 2">
                  <div class="rad"></div>
                  {{local.Splitting}}
                </span>
              </div>
              <div class="record-supplier">
                <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.buyArea }}：</span>
                <div>{{ item.buyAreaName || ''}}</div>
              </div>
              <div class="record-warehouse">
                <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{local.warehouseIn}}：</span>
                <div>{{item.warehouseName}}</div>
              </div>
              <div class="record-warehouse">
                <span
                  :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'"
                  v-if="item.status == 2"
                >{{local.saveTime}}：</span>
                <span
                  :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'"
                  v-else
                >{{local.splitTime}}：</span>
                <div v-if="item.status == 2">{{item.createTime}}</div>
                <div v-else>{{item.passTime}}</div>
              </div>
            </div>
          </div>
          <!-- </scroll-view> -->
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <button
        class="confirm"
        style="font-size: 26rpx;"
        @click="routerToUrl('/packageA/pages/outStockControl/index')"
      >{{local.productSplitting}}</button>
    </div>
  </div>
</template>

<script>
import home from '@/api/home'
import headerBar from '@/components/headerBar'
import { formatDate } from '@/utils/index'
export default {
  components: {
    headerBar
  },
  onLoad(options) {
    this.initLang()
    if (options.activeIndex == 0) {
      this.activeIndex = options.activeIndex
      this.getProductList()
    } else if (options.activeIndex == 2) {
      this.activeIndex = options.activeIndex
      this.tabClick(options.activeIndex)
    } else if (options.activeIndex == 3) {
      this.activeIndex = options.activeIndex
      this.tabClick(options.activeIndex)
    }
    var myDate = new Date()
    this.startTime = formatDate(myDate, 'YYYY-MM-DD')
    this.endTime = formatDate(myDate, 'YYYY-MM-DD')
    this.getProductList()
    this.pdt = this.globalData.CustomBar
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
      this.lang = wx.getStorageSync('lang')
    },
    //更新单据方法
    async getProductList (type) {
      wx.showLoading({title: this.local.loading})
      home.getProductList({
        key: this.inputVal,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        status: this.activeIndex || ''
      }).then(res => {
        wx.hideLoading()
        const { rows, code, msg, total } = res
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.total = total
        rows.forEach(item=>{
          if(item.passTime){
            item.passTime = wx.$timeFormat(item.passTime,'time') //new Date(item.passTime).$format('dd/MM/yyyy hh:ss')
          }
        })
        if (this.pageNum == 1) {
          this.splitRecords = rows
        } else {
          this.splitRecords = this.splitRecords.concat(rows)
        }
      })
    },
    //点击搜索事件
    inputTyping(e) {
      // this.inputVal = e.mp.detail.value
      this.pageNum = 1
      this.splitRecords = []
      this.getProductList()
    },
    //筛选条件切换
    tabClick(velue) {
      this.activeIndex = velue
      this.pageNum = 1 // 初始化当前页面
      this.pageSize = 7
      this.splitRecords = [] // 初始化清单数据
      this.getProductList() // 请求数据
    },
    //清空搜索
    clearInput() {
      this.inputVal = ''
    },

    changeLan(val, lang) {
      this.local = val
      this.lang = lang
    },
    routerToUrl(url) {
      wx.navigateTo({
        url
      })
    },
    TimeChange(e) {
    },
    showInput() {
      this.inputShowed = true
    },
    hideInput() {
      this.inputVal = ''
      this.inputShowed = false
      this.getProductList()
    }
  },
  async onReachBottom() {
    // if (this.activeIndex == 0) {
    if (
      this.pageNum < parseInt((this.total + this.pageSize - 1) / this.pageSize)
    ) {
      // 如果当前页面小于最后一页
      this.pageNum = this.pageNum + 1 // 把当前页面，变成下一页面的页面数
      this.getProductList()
    } else {
      wx.showToast({
        // 如果当前页面处于最后一页，就提示没有数据了
        title: '没有更多了',
        icon: 'none',
        duration: 2000
      })
    }
  },
  // 下拉刷新
  async onPullDownRefresh() {
    this.pageNum = 1 // 只请求第一页面的列表数据
    this.getProductList()
    wx.stopPullDownRefresh() // 停止下拉刷新
  },
  onUnLoad() {
    this.pageNum = 1
    this.pageSize = 7
  },
  data() {
    return {
      lang: wx.getStorageSync('lang'),
      total: 0,
      total2: 0,
      total3: 0,
      isBlock: false,
      pdt: 66,
      local: wx.getStorageSync('local'),
      key: '',
      pageNumType: 1,
      pageSizeType: 7,
      pageNum: 1,
      pageSize: 7,
      lastPage: 100,
      nextPage: 1,
      splitRecords: [],
      activeIndex: 2,
      inputShowed: false,
      inputVal: '',
      time: '12:01'
    }
  },
  created() {}
}
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
.switchTab-a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}
.switchTab-b {
  display: flex;
  flex-direction: row;
}
.msg-status {
  flex: 1;
  @extend %flexRowStart;
  font-size: 26rpx;
  .a {
    margin-right: 15rpx;
    color: #707070;
  }
}
.msg_item_on {
  color: #2a94ec !important;
}
</style>
